<%@page import="com.mto.module.karaoke.service.CategoryLocalServiceUtil"%>
<%@page import="com.mto.module.karaoke.model.Category"%>
<%@page import="javax.portlet.ResourceURL"%>
<%@ include file="/jsps/main.jsp"%>

<%
long songId = ParamUtil.getLong(request, "songId");
Song recordSong = null;
String songName = "", songAuthor = "",  songSinger = "", recordNumber = "",audioUrl="", 
action = "save", lyricUrl="", strSongId = String.valueOf(songId);

String songCategory ="";

if(songId > 0) {
	recordSong = SongLocalServiceUtil.getSong(songId);
	songName = recordSong.getSongName();
	songAuthor = recordSong.getSongAuthor();
	Category category=CategoryLocalServiceUtil.getCategory( recordSong.getSongCategory());
	songCategory =category.getName();
	songSinger = recordSong.getSongSinger();
	recordNumber = String.valueOf(recordSong.getRecordNumber());
	audioUrl = recordSong.getAudioUrl();
	lyricUrl = recordSong.getSongUrl();
	
}
%>

<div id="video-info">
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div id="jp_container_1" class="jp-audio">
			<div class="jp-type-single">
				<div class="jp-gui jp-interface">
				<div id="wowslider-container1">
					<div class="ws_images">
						<ul>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar1.jpg" alt="zingstar1"
								title="zingstar1" id="wows1_0" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar2.jpg" alt="zingstar2"
								title="zingstar2" id="wows1_1" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar3.jpg" alt="zingstar3"
								title="zingstar3" id="wows1_2" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar4.jpg" alt="zingstar4"
								title="zingstar4" id="wows1_3" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar5.jpg" alt="zingstar5"
								title="zingstar5" id="wows1_4" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar6.jpg" alt="zingstar6"
								title="zingstar6" id="wows1_5" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar7.jpg" alt="zingstar7"
								title="zingstar7" id="wows1_6" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar8.jpg" alt="zingstar8"
								title="zingstar8" id="wows1_7" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar9.jpg" alt="zingstar9"
								title="zingstar9" id="wows1_8" /></li>
							<li><img src="<%=basePath %>resources/slide/data1/images/zingstar10.jpg" alt="zingstar10"
								title="zingstar10" id="wows1_9" /></li>
						</ul>
					</div>
					<div>
						<div class="subtitle" id="subtitle" style="font-size: xx-large;z-index: 999999"></div>
					</div>
					
				</div>
				<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<table class="jp-controls">
						<tr>
							<td><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></td>
							<td>
								<a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
								<a href="javascript:;" class="jp-play" id="jp-play" tabindex="1">play</a>
							</td>
							<td><a href="javascript:;" class="jp-recording" id="jp-recording" tabindex="1">recording</a></td>
							<td>
								<div class="jp-current-time"></div><br>
								<div class="jp-duration"></div>
							</td>
							<td>
								<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
								<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
							</td>
							<td>
								<div class="jp-volume-bar">
									<div class="jp-volume-bar-value"></div>
								</div>
							</td>
							<td><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></td>
							<td class="jp-time-holder">
								<div class="jp-toggles">
									<a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a>
									<a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
</div>

<br>
<table class="table">
	<tr>
		<th style="width:100px"><liferay-ui:message key="songName"/></th>
		<td><%=songName %></td>
	</tr>
	<tr>
		<th><liferay-ui:message key="songAuthor"/></th>
		<td><%=songAuthor %></td>
	</tr>
	<tr>
		<th><liferay-ui:message key="songCategory"/></th>
		<td><%=songCategory %></td>
	</tr>
	<tr>
		<th><liferay-ui:message key="songSinger"/></th>
		<td><%=songSinger %></td>
	</tr>
</table>

<script src="<%=basePath %>resources/js/ricekaraoke.js" type="text/javascript"></script>
<script src="<%=basePath %>resources/js/simplekaraokedisplay.js" type="text/javascript"></script>

<script type="text/javascript">
	var songUrl = '<%= recordSong.getSongUrl()%>';
	
	var audioLink='<%=recordSong.getAudioUrl()%>';
	
	var rate = .05;
	var interval;
	var karaokeShow;
	
	var array = $.parseJSON(songUrl);
	
	var timings = RiceKaraoke.simpleTimingToTiming(array);
	var karaoke = new RiceKaraoke(timings);
	var numDisplayLines = 2;
	var currentTime=0;
	var limit=100;
	
	var renderer = new SimpleKaraokeDisplayEngine("subtitle", numDisplayLines);
	karaokeShow = karaoke.createShow(renderer, numDisplayLines);
	
	var isRecoding=false;
	
// 	interval = setInterval(function() {
// 		if (currentTime > limit) {
// 			console.log()
// 			clearInterval(interval);
// 		}
// 		currentTime += rate;
// 		karaokeShow.render(currentTime.toFixed(3));
// 	}, rate * 1000);

</script>

<%
ResourceURL resourceURL = renderResponse.createResourceURL();


PortletURL renderUrl = renderResponse.createRenderURL();
renderUrl.setParameter("jspPage", "/jsps/phong-thu/saveKaraoke.jsp");
renderUrl.setParameter("tab", "phong-thu");
renderUrl.setParameter("songId", String.valueOf(songId));
renderUrl.setPortletMode(PortletMode.VIEW);
%>

<aui:script>
	$(document).ready(function(){
		console.log($("#jquery_jplayer_1"));
		$("#jquery_jplayer_1").jPlayer({
			ready: function () {
				$(this).jPlayer("setMedia", {
					mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
				});
				if(typeof initAudio == 'function') {
					initAudio($(this).find('audio'), {
						resourceURL: '<%=resourceURL.toString() %>',
						songName: '<%=songName %>',
						renderUrl: '<%=renderUrl.toString() %>'
					});
				};
			},
			swfPath: "js",
			supplied: "mp3",
			wmode: "window",
			smoothPlayBar: true,
			keyEnabled: true
		});
	});
		
</aui:script>